<template>
	<view class="container">
		<!-- LOGO -->
		<view class="img-wrap">
			<view class="header">
				<view class="table">
					<view class="customer">
						<view
							style="width: 50%;height: 100%;display: flex;flex-direction: column;align-items: center;margin-top: 20px;">
							<text style="color: #193566;font-weight: 800;font-size: 14px;">今日总客流</text>
							<text
								style="color: #193566;font-weight: 800;font-size: 25px;height: 33px;">{{briefingData[0].totalPassengerFlow || 0}}</text>
							<view style="display: flex;justify-content: space-between;width: 90px;margin-left: 10px;">
								<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">变化率：</text>
								<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">50%</text>
							</view>
							<view style="display: flex;justify-content: space-between;width: 90px;margin-left: 10px;">
								<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">昨日总客流：</text>
								<text
									style="color: #b4b4b4;font-weight: 800;font-size: 10px">{{briefingData[1].totalPassengerFlow || 0}}</text>
							</view>
						</view>
						<view style="width: 1rpx; height: 60px; background: #dcdde4; margin-top: 40px;"></view>
						<view
							style="width: 50%;height: 100%;display: flex;flex-direction: column;align-items: center;margin-top: 20px;">
							<text style="color: #193566;font-weight: 800;font-size: 14px;">今日新客流</text>
							<text
								style="color: #193566;font-weight: 800;font-size: 25px;height: 33px;">{{briefingData[0].inboundNewFlow || 0}}</text>
							<view style="display: flex;justify-content: space-between;width: 90px;margin-left: 10px;">
								<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">变化率：</text>
								<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">50%</text>
							</view>
							<view style="display: flex;justify-content: space-between;width: 90px;margin-left: 10px;">
								<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">昨日新客流：</text>
								<text
									style="color: #b4b4b4;font-weight: 800;font-size: 10px">{{briefingData[1].inboundNewFlow || 0}}</text>
							</view>
						</view>
					</view>
					<view style="display: flex;justify-content: space-around;">
						<view style="width: 30%;height: 1px; background: #dcdde4;"></view>
						<view style="width: 30%;height: 1px; background: #dcdde4;"></view>
					</view>

					<view class="customer1">
						<view
							style="width: 50%;height: 100%;display: flex;flex-direction: column;align-items: center;margin-top: 20px;">
							<text style="color: #193566;font-weight: 800;font-size: 14px;">今日回头客流</text>
							<text
								style="color: #193566;font-weight: 800;font-size: 25px;height: 33px;">{{briefingData[0].inboundLaterFlow || 0}}</text>
							<view style="display: flex;justify-content: space-between;width: 90px;margin-left: 10px;">
								<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">变化率：</text>
								<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">50%</text>
							</view>
							<view style="display: flex;justify-content: space-between;width: 90px;margin-left: 10px;">
								<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">昨日回头客流：</text>
								<text
									style="color: #b4b4b4;font-weight: 800;font-size: 10px">{{briefingData[1].inboundLaterFlow || 0}}</text>
							</view>
						</view>
						<view style="width: 1rpx; height: 60px; background: #dcdde4; margin-top: 30px;"></view>
						<view
							style="width: 50%;height: 100%;display: flex;flex-direction: column;align-items: center;margin-top: 20px;">
							<text style="color: #193566;font-weight: 800;font-size: 14px;">今日过店客流</text>
							<text
								style="color: #193566;font-weight: 800;font-size: 25px;height: 33px;">{{briefingData[0].passFlow || 0}}</text>
							<view style="display: flex;justify-content: space-between;width: 90px;margin-left: 10px;">
								<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">变化率：</text>
								<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">50%</text>
							</view>
							<view style="display: flex;justify-content: space-between;width: 90px;margin-left: 10px;">
								<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">昨日过店客流：</text>
								<text
									style="color: #b4b4b4;font-weight: 800;font-size: 10px">{{briefingData[1].passFlow || 0}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="table-figure">
					<passenger :message="this.passengerData" />

				</view>
			</view>
		</view>
		<tabBar></tabBar>
	</view>
</template>

<script>
	import {
		findShopStatistics
	} from '@/network/trafficBriefing.js';
	import passenger from "./passenger.vue"
	export default {
		components: {
			passenger
		},
		data() {
			return {
				current: {
					organId: "",
					currentDate: "1"
				},
				briefingData: {},
				passengerData: {}
			}
		},
		mounted() {
			this.current.organId = uni.getStorageSync('organId'),
				this.trafficBriefing()
		},
		methods: {
			trafficBriefing() {
				findShopStatistics(this.current).then(res => {
					const code = res.data.code;
					if (code === 200) {
						this.briefingData = res.data.result
					} else {
						uni.showToast({
							title: res.data.message
						})
					}
				}).catch(err => {
					// console.log(err)
				})
			}

		}
	}
</script>

<style>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f0f2fa;
	}

	.img-wrap {
		height: 30%;
		text-align: center;
		background: #333d8b;
		background-image: url('../../static/yd.png');
		background-size: 100% 100%;
	}

	.header {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.table {
		width: 90%;
		height: 250px;
		background: #fff;
		margin-top: 10%;
		border-radius: 10px;

	}

	.table-figure {
		width: 90%;
		height: 310px;
		background: #fff;
		margin-top: 10%;
		border-radius: 10px;

	}

	.customer {
		height: 124px;
		display: flex;
		justify-content: space-between;
	}

	.customer1 {
		height: 124px;
		display: flex;
		justify-content: space-between;
	}
</style>